<template>
  <page-header-wrapper :title="false">
    <div class="Row">
      <div class="leftBlock">
        <typicalLeftTree :leftTreeConfig="leftTreeConfig" @select="leftTreeClick"></typicalLeftTree>
      </div>
      <div class="Role rightBlock">
        <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
        <a-modal
          width="45%"
          v-model="modleVisible"
          :title="form.id ? '编辑用户' : '新增用户'"
          @cancel="() => (this.modleVisible = false)"
          :confirm-loading="formButtonDisableFlag"
          @ok="onSubmit"
        >
          <div id="modalContent">
            <div class="formAspin" v-if="editWaitForLoading">
              <a-spin />
            </div>
            <a-form-model
              ref="formRef"
              :model="form"
              :rules="rules"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
            >
              <a-row type="flex" justify="space-between">
                <a-col :span="12">
                  <Input :form="form" label="姓名" prop="name" placeholder="请输入姓名"></Input>
                </a-col>

                <a-col :span="12">
                  <Input :form="form" label="手机号码" prop="mobile" placeholder="请输入手机号码"></Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="form"
                    label="登录名"
                    prop="userName"
                    placeholder="请输入登录名"
                    :disabled="form.id ? true : false"
                  ></Input>
                </a-col>
                <a-col :span="12" v-if="!form.id">
                  <Input :form="form" label="登录密码" prop="password" placeholder="请输入登录密码"></Input>
                </a-col>
                <a-col :span="12">
                  <Input :form="form" label="邮箱" prop="email" placeholder="请输入邮箱"></Input>
                </a-col>
                <a-col :span="12">
                  <Select
                    :form="form"
                    label="性别"
                    prop="gender"
                    placeholder="请选择性别"
                    :optList="getGender()"
                  ></Select>
                </a-col>
                <a-col :span="12">
                  <Select
                    :form="form"
                    label="角色"
                    multiple="multiple"
                    prop="roleIds"
                    placeholder="请选择角色"
                    @change="roleChange"
                    :optList="oDictionary.roleOption"
                  ></Select>
                </a-col>
                <a-col :span="12">
                  <treeSelect
                    :form="form"
                    prop="organizationId"
                    label="所属组织"
                    placeholder="请选择所属组织"
                    :treeData="oDictionary.organizationsTree"
                  ></treeSelect>
                </a-col>
                <!-- <a-col :span="12">
                  <treeSelect
                    :form="form"
                    prop="department.id"
                    label="所属部门"
                    placeholder="请选择所属部门"
                    :treeData="oDictionary.departmentOption"
                  ></treeSelect>
                </a-col> -->
                <!-- <a-col :span="12">
                  <Select
                    :form="form"
                    label="状态"
                    prop="isEnable"
                    placeholder="请选择状态"
                    :optList="getIsEnableOption()"
                  ></Select>
                </a-col> -->
              </a-row>
            </a-form-model>
          </div>
        </a-modal>
        <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
        <div class="table">
          <div class="tableTitle">
            <div class="title">用户列表</div>
            <div class="addButton">
              <a-button type="primary" @click="handleImport()">用户导入 </a-button>
              <a-button type="primary" @click="handleEdit()"> 新增用户 </a-button>
            </div>
          </div>
          <div class="tableList">
            <typicalTable
              ref="insideTable"
              :tableConfig="tableConfig"
              :tableData="tableData"
              @getTableData="getTableData"
            >
              <template v-slot="slotProps">
                <Button label="编辑" v-if="slotProps.record.id !== '1'" @click="handleEdit(slotProps.record)"></Button>
                <a-popconfirm
                  slot="action"
                  title="此操作将移除该用户角色及所属组织机构，是否继续?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleDelete(slotProps.record)"
                >
                  <Button v-if="slotProps.record.id !== '1'" type="stop" label="解绑"></Button>
                </a-popconfirm>
                <a-popconfirm
                  slot="action"
                  title="此操作将重置密码，是否继续?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="resetPassword(slotProps.record)"
                >
                  <Button v-if="slotProps.record.id !== '1'" label="重置密码"></Button>
                </a-popconfirm>
                <Button
                  v-if="slotProps.record.id !== '1'"
                  :type="slotProps.record.isEnable === 0 ? 'start' : 'stop'"
                  @click="fnStartStop(slotProps.record)"
                ></Button>
              </template>
            </typicalTable>
          </div>
        </div>
        <div class="Role rightBlock">
          <a-spin tip="加载中..." class="position" v-if="userLoading"> </a-spin>
          <a-modal
            width="65%"
            v-model="importVisible"
            title="用户导入（仅充电用户或无任何角色的用户可导入）"
            @cancel="() => (this.importVisible = false)"
            :confirm-loading="portButtonDisableFlag"
            @ok="importSubmit"
          >
            <div id="importContent">
              <div class="formAspin" v-if="editWaitForLoading">
                <a-spin />
              </div>
              <div class="tableList">
                <a-row>
                  <a-col :span="16">
                    <typicalSearch
                      ref="importSearch"
                      :searchConfig="importSearchConfig"
                      @searchMethod="getImportData"
                    ></typicalSearch>
                    <typicalTable
                      ref="importTable"
                      :tableConfig="importTableConfig"
                      :tableData="importTableData"
                      :isRowClick="true"
                      @getTableData="getImportData"
                      @rowEmit="rowEmit"
                    >
                      <!-- <template v-slot="slotProps">
                  <Button label="编辑" @click="handleUserEdit(slotProps.record)"></Button>
                </template> -->
                    </typicalTable>
                  </a-col>
                  <a-col :span="8" style="margin-top: 1%">
                    <h3 style="text-align: center">用户信息：</h3>
                    <a-form-model
                      ref="importFormRef"
                      :model="importForm"
                      :rules="importRules"
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 18 }"
                    >
                      <a-row type="flex" justify="space-between">
                        <a-col :span="24">
                          <Input :form="importForm" label="姓名" prop="name" placeholder="请输入姓名"></Input>
                        </a-col>

                        <a-col :span="24">
                          <Input
                            :form="importForm"
                            :disabled="true"
                            label="手机号码"
                            prop="mobile"
                            placeholder="请输入手机号码"
                          ></Input>
                        </a-col>
                        <a-col :span="24">
                          <Input
                            :form="importForm"
                            :disabled="true"
                            label="登录名"
                            prop="userName"
                            placeholder="请输入登录名"
                          ></Input>
                        </a-col>
                        <a-col :span="24">
                          <Input
                            :form="importForm"
                            label="登录密码"
                            prop="password"
                            placeholder="请输入登录密码"
                          ></Input>
                        </a-col>
                        <a-col :span="24">
                          <Input :form="importForm" label="邮箱" prop="email" placeholder="请输入邮箱"></Input>
                        </a-col>
                        <a-col :span="24">
                          <Select
                            :form="importForm"
                            label="性别"
                            prop="gender"
                            placeholder="请选择性别"
                            :optList="getGender()"
                          ></Select>
                        </a-col>
                        <a-col :span="24">
                          <Select
                            :form="importForm"
                            label="角色"
                            multiple="multiple"
                            prop="roleIds"
                            placeholder="请选择角色"
                            :isCharge="true"
                            :optList="oDictionary.roleOption"
                            @change="mulRoleChange"
                          ></Select>
                        </a-col>
                        <a-col :span="24">
                          <treeSelect
                            :form="importForm"
                            prop="organizationId"
                            label="所属组织"
                            placeholder="请选择所属组织"
                            :treeData="oDictionary.organizationsTree"
                          ></treeSelect>
                        </a-col>
                      </a-row>
                    </a-form-model>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-modal>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import typicalLeftTree from '@/components/typicalLeftTree';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Textarea from '@/components/typicalControl/textarea';
import Button from '@/components/typicalControl/button';
import { getIsEnableOption, getGender } from '@/utils/frequentInterface';
import { recursionTreeDisabled } from '@/utils/tool';

import { listUsers, organizationsTree, listAllRoles } from '@/api/system';
import { refunds } from '@/api/cabin';
export default {
  name: 'UserManage',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    typicalLeftTree: typicalLeftTree,
    Input: Input,
    treeSelect: treeSelect,
    Select: Select,
    InputNumber: InputNumber,
    Button: Button,
    Textarea: Textarea,
  },
  data() {
    return {
      formButtonDisableFlag: false, // 表单确定禁用按钮 防止多次点击多次保存
      editWaitForLoading: false, // 加载编辑回显数据等待Loading
      roleLoading: false, // 加载表格的loading
      userLoading: false,
      modleVisible: false, // 控制弹框
      importVisible: false, // 用户导入弹框
      portButtonDisableFlag: false,
      form: {
        userName: undefined,
        name: undefined, // 名字
        email: undefined, // 邮箱
        mobile: undefined,
        gender: undefined,
        password: undefined,
        userRole: undefined, // 角色
        roleIds: undefined,
        // isEnable: 1, // 状态
        organizationId: '',
      },
      importForm: {
        userName: undefined,
        name: undefined, // 名字
        email: undefined, // 邮箱
        mobile: undefined,
        gender: undefined,
        password: undefined,
        roleIds: undefined,
        userRole: undefined, // 角色
        // isEnable: 1, // 状态
        organizationId: '',
      },
      rules: {
        // 规则验证
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 15, message: '最大长度不能超过15个字', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在4到20个字之间', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在6到20个字之间', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;

              if (!passwordreg.test(value)) {
                callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'));
              } else {
                callback();
              }
            },
          },
        ],
        email: [
          {
            pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
            message: '请输入正确格式的邮箱',
            trigger: 'blur',
          },
          { max: 45, message: '最大长度不能超过45个字', trigger: 'blur' },
        ],
        mobile: [
          {
            required: true,
            pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
            message: '请输入正确格式的手机号码',
            trigger: 'blur',
          },
        ],
        organizationId: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
        roleIds: [{ required: true, message: '请选择角色', trigger: 'change' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      },
      importRules: {
        // 规则验证
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 15, message: '最大长度不能超过15个字', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在6到20个字之间', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;
              if (!passwordreg.test(value)) {
                callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'));
              } else {
                callback();
              }
            },
          },
        ],
        organizationId: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
      },
      permissionsTreeArray: [], // 表单的树形下拉数据
      expandedKeys: [], // 控制树形下拉 展开收起全选取消全选 功能
      checkedKeys: [], // 树形下拉选中的数据
      // 搜索组件配置
      importSearchConfig: {
        formItemList: [
          {
            type: 'input',
            prop: 'mobile',
            value: '',
            label: '手机号',
          },
        ],
        parent: this,
      },
      searchConfig: {
        formItemList: [
          {
            type: 'input',
            prop: 'searchName',
            value: '',
            label: '姓名',
          },
          // {
          //   type: 'inputNum',
          //   prop: 'searchMobile',
          //   value: '',
          //   max: 99999999999,
          //   label: '手机号码'
          // },
          {
            type: 'rangeDatePicker',
            prop: 'searchCreateDateBegin&searchCreateDateEnd',
            value: [],
            label: '创建日期',
          },
        ],
        parent: this,
      },
      importTableConfig: {
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            ellipsis: true,
          },
          {
            title: '角色',
            dataIndex: 'roleName',
            ellipsis: true,
            width: '20%',
            // customRender: this.sRoleName,
          },
          {
            title: '登录名',
            dataIndex: 'userName',
            ellipsis: true,
          },
          // {
          //   title: '手机号码',
          //   dataIndex: 'mobile',
          //   ellipsis: true
          // },
          // {
          //   title: '所属组织',
          //   dataIndex: 'organization.name',
          //   ellipsis: true,
          // },
          {
            title: '状态',
            dataIndex: 'isEnable',
            width: '60px',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            ellipsis: true,
            customRender: this.formatterTime,
          },
          // {
          //   title: '操作',
          //   scopedSlots: { customRender: 'action' },
          //   width: '220px',
          // },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            ellipsis: true,
          },
          {
            title: '角色',
            dataIndex: 'roleName',
            ellipsis: true,
            width: '20%',
            // customRender: this.sRoleName,
          },
          {
            title: '登录名',
            dataIndex: 'userName',
            ellipsis: true,
          },
          // {
          //   title: '手机号码',
          //   dataIndex: 'mobile',
          //   ellipsis: true
          // },
          {
            title: '所属组织',
            dataIndex: 'organization.name',
            ellipsis: true,
          },
          {
            title: '状态',
            dataIndex: 'isEnable',
            width: '60px',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            ellipsis: true,
            customRender: this.formatterTime,
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            width: '220px',
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      importTableData: {
        records: [],
        total: 0,
      },
      // 详情左侧树组件
      leftTreeConfig: {
        treeData: [],
      },
      // 左侧树点击存放的组织机构id
      searchOrganizationId: null,
      oDictionary: {
        roleOption: [],
        organizationsTree: [],
        departmentOption: [],
      },
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    getIsEnableOption,
    getGender,
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code == 200) {
          let datas = res.data;
          this.leftTreeConfig.treeData = datas;
          this.searchOrganizationId = datas.length > 0 ? datas[0].code : '';
          this.$refs.insideSearch.searchInfo();
          recursionTreeDisabled(datas);
          this.oDictionary.organizationsTree = datas;
        }
      });
      // 角色
      listAllRoles().then((res) => {
        if (res.code == 200) {
          this.oDictionary.roleOption = [];
          res.data.records.map((item) => {
            this.oDictionary.roleOption.push({
              name: item.name,
              code: item.id,
            });
          });
        }
      });
    },
    // /**
    //  * [dynamicDepartmentOption 动态加载部门字典]
    //  * @param  {[type]} val [组织机构条件]
    //  * @return {[type]}     [description]
    //  */
    // dynamicDepartmentOption(val) {
    //   this.oDictionary.departmentOption = [];
    //   if (val) {
    //     departmentsTree({ searchOrganizationId: val }).then(res => {
    //       if (res.code === 200) {
    //         this.oDictionary.departmentOption = res.data;
    //       }
    //     });
    //   }
    // },
    /**
     * [fnStartStop 启用停用方法]
     * @param  {[type]} row [行数据]
     * @return {[type]}     [description]
     */
    fnStartStop(row) {
      this.roleLoading = true;
      let status = row.isEnable == 1 ? 0 : 1;
      listUsers(`/updateStatus?id=${row.id}&isEnable=${status}`, 'patch')
        .then((res) => {
          if (res.code == 200) {
            this.formSuccessOperation(res);
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!this.searchOrganizationId) return;
      if (this.searchOrganizationId != null) searchParam.searchOrganizationId = this.searchOrganizationId;
      this.roleLoading = true;
      let params = {
        receiveTimeBegin: searchParam.searchCreateDateBegin,
        receiveTimeEnd: searchParam.searchCreateDateEnd,
        code: this.searchOrganizationId,
        name: searchParam.searchName,
      };
      let page = searchParam.pageNumber ? searchParam.pageNumber + 1 : 1;
      let size = searchParam.pageSize ? searchParam.pageSize : 10;
      listUsers(`/selectUserList?pageNum=${page}&pageSize=${size}`, 'post', params)
        .then((res) => {
          if (res.code === 200 && res.data.records) {
            let datas = res.data;
            datas.records.forEach((item) => {
              let roleList = item.roles.map((p) => {
                return p.name;
              });
              item.roleName = roleList && roleList.length > 0 ? roleList.join(',') : '';
            });
            this.tableData = datas;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    /**
     * @description: 新增编辑用户表单提交
     */
    onSubmit() {
      if (this.form.id == '1') {
        this.modleVisible = false;
        return;
      }

      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let msg = this.form.id ? '编辑' : '新增';
          this.$confirm({
            title: '提示',
            content: (h) => `确定要${msg}用户吗？`,
            onOk: () => this.doOperate(),
            centered: true,
            maskClosable: true,
          });
        } else {
          return false;
        }
      });
    },
    doOperate() {
      this.formButtonDisableFlag = true;
      this.form.userRole = this.form.roleIds.map((item) => {
        return { roleId: item };
      });
      if (this.form.id) {
        this.editRole(this.form);
      } else {
        this.roleAdd(this.form);
      }
    },
    importSubmit() {
      this.$refs.importFormRef.validate((valid) => {
        if (valid) {
          this.isUserImport();
          this.importForm.userRole = this.importForm.roleIds.map((item) => {
            return { roleId: item };
          });
        } else {
          return false;
        }
      });
    },

    /**
     * [initializationForm 初始化form数据]
     * @return {[type]} [description]
     */
    initializationForm() {
      return {
        userName: undefined,
        name: undefined, // 名字
        email: undefined, // 邮箱
        mobile: undefined,
        gender: undefined,
        password: undefined,
        userRole: undefined, // 角色
        roleIds: undefined,
        // isEnable: 1, // 状态
        organizationId: '',
      };
    },

    /**
     * @description: 新增用户权限
     * @param {object} addRoleParam 表单参数
     */
    roleAdd(addRoleParam) {
      let { userName, name, email, userRole, organizationId, mobile, gender, password } = { ...addRoleParam };
      listUsers('/insertUser', 'post', { userName, name, email, userRole, organizationId, mobile, gender, password })
        .then((res) => {
          if (res.data.code == 200) {
            this.formSuccessOperation(res.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .finally(() => {
          this.formButtonDisableFlag = false;
        });
    },

    /**
     * @description: 编辑用户权限
     * @param {object} editRoleParam 表单参数
     */
    editRole(editRoleParam) {
      let { id, userName, name, email, userRole, organizationId, mobile, gender } = { ...editRoleParam };
      listUsers('/updateUser', 'put', { id, userName, name, email, userRole, organizationId, mobile, gender })
        .then((res) => {
          if (res.code == 200) {
            this.formSuccessOperation(res);
          }
        })
        .finally(() => {
          this.formButtonDisableFlag = false;
        });
    },

    /**
     * @description: 表单新增编辑成功后的公共的代码 （消息提示 搜索框重置 请求表格数据）
     * @param {object} successFormData 表单请求成功后返回的对象
     */
    formSuccessOperation(successFormData) {
      this.$message.success(successFormData.message);
      this.modleVisible = false;
      this.$refs.insideTable.updateListData();
    },

    /**
     * [handleEdit 新增或编辑]
     * @param  {[type]} row [如果编辑入参行数据]
     * @return {[type]}     [description]
     */
    handleEdit(row) {
      this.modleVisible = true;
      if (this.$refs.formRef) {
        this.$refs.formRef.resetFields();
      }
      this.form = this.initializationForm();
      if (row) {
        this.editWaitForLoading = true;
        this.form = { ...row };
        // 根据ID请求相应用户的权限 进行回显
        listUsers('/updateUserById', 'get', { id: row.id })
          .then((res) => {
            if (res.code === 200) {
              this.form = res.data;
              this.form.roleIds = this.form.roles.map((item) => {
                return item.id;
              });
            }
          })
          .finally(() => {
            this.editWaitForLoading = false;
          });
      }
    },

    /**
     * @description: 点击删除
     * @param {object} roleTableRowData 格某一行的数据对象
     */
    handleDelete(roleTableRowData) {
      listUsers(`/updateByUserId?id=${roleTableRowData.id}`, 'put').then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.$refs.insideTable.updateListData();
        }
      });
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    sRoleName(val) {
      if (val) {
        return val.map((e) => {
          return e.name;
        });
      }
      return '';
    },
    leftTreeClick(val) {
      this.searchOrganizationId = val.code;
      this.$refs.insideSearch.searchInfo();
    },
    roleChange(e) {
      this.form.roleIds = e.length > 0 ? e : undefined;
      this.form = { ...this.form };
    },
    mulRoleChange(e) {
      this.$set(this.importForm, 'roleIds', e);
      this.importForm.userRole = this.importForm.roleIds.map((item) => {
        return { roleId: item };
      });
    },

    resetPassword(row) {
      listUsers(`/updateResetPassword?id=${row.id}`, 'patch').then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.$refs.insideTable.updateListData();
        }
      });
    },

    getImportData(searchParam) {
      this.userLoading = true;
      let params = {
        pageNum: searchParam && searchParam.pageNumber ? searchParam.pageNumber + 1 : 1,
        pageSize: searchParam && searchParam.pageSize ? searchParam.pageSize : 10,
        mobile: searchParam && searchParam.mobile ? searchParam.mobile : '',
      };
      refunds(`/selectChargeUserImportList`, 'get', params)
        .then((res) => {
          if (res.code == 200) {
            let datas = res.data;
            datas.records.forEach((item, index) => {
              item.active = index == 0 ? true : false;
              let roleList = item.roles.map((p) => {
                return p.name;
              });
              item.roleName = roleList && roleList.length > 0 ? roleList.join(',') : '';
            });
            this.importTableData = datas;
            if (datas.records.length > 0) {
              this.getChargeUserInfo(datas.records[0]);
            }
          } else {
            this.importTableData.records = [];
            this.importTableData.total = 0;
          }
        })
        .finally(() => {
          this.userLoading = false;
        });
    },
    rowEmit(row) {
      this.getChargeUserInfo(row);
    },
    getChargeUserInfo(item) {
      this.userLoading = true;
      refunds('/selectChargeUserImportById', 'get', { Id: item.id })
        .then((res) => {
          let datas = res.data;
          let {
            id,
            userName,
            name, // 名字
            email, // 邮箱
            mobile,
            gender,
            password,
            organizationId,
          } = { ...datas };
          this.importForm = {
            id,
            userName,
            name, // 名字
            email, // 邮箱
            mobile,
            gender,
            password,
            organizationId,
          };

          this.importForm.roleIds =
            datas.roles && datas.roles.length > 0
              ? datas.roles.map((item) => {
                  return item.id;
                })
              : [];
        })
        .finally(() => {
          this.userLoading = false;
        });
    },
    // handleUserEdit() {},
    // 充电用户导入
    handleImport() {
      this.importVisible = true;
      this.getImportData();
    },
    isUserImport() {
      this.$confirm({
        title: '提示',
        content: (h) => '确定要导入该项用户信息吗？',
        onOk: () => this.doUserImport(),
        centered: true,
        maskClosable: true,
      });
    },
    doUserImport() {
      this.portButtonDisableFlag = true;
      let { id, userName, name, email, mobile, gender, password, userRole, organizationId } = {
        ...this.importForm,
      };
      let param = { id, userName, name, email, mobile, gender, password, userRole, organizationId };
      refunds('/updateChargeUserImport', 'put', param)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.getImportData();
          }
        })
        .finally(() => {
          this.portButtonDisableFlag = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        button {
          margin-left: 10px;
        }
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
#modalContent {
  width: 100%;
  height: 300px;
  overflow: auto;
  position: relative;
  .formAspin {
    position: absolute;
    width: 100%;
    height: 300px;
    background: #ececec;
    border-radius: 4px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.Row {
  overflow: hidden;
}
.leftBlock {
  width: 300px;
  height: calc(100vh - 150px);
  float: left;
  background: #fff;
  padding-top: 10px;
}
.rightBlock {
  float: right;
  width: calc(100% - 310px);
}
/deep/ .ant-input {
  padding: 4px 6px;
}

/deep/ .searchForm .ant-col-6 {
  width: 28%;
}
/deep/ .searchForm .ant-col-4,
/deep/ .searchForm .ant-col-12 {
  width: 25%;
}
/deep/ .searchForm .ant-calendar-picker {
  width: 122% !important;
}
/deep/ .tableList .searchForm .ant-col-6 {
  width: 35%;
}
/deep/ .tableList .searchForm .ant-col-18 {
  width: 65%;
}
</style>
